<template>
    <div class="box">
        <!-- <header> -->
            <van-dropdown-menu>
                <van-dropdown-item @change="changeType" v-model="value1" :options="option1" />
                 <van-dropdown-item @change="changeStatus" v-model="value2" :options="option2" />
            </van-dropdown-menu>
        <!-- </header> -->
        <ul v-if="list.length">
            <li v-for="(data,index) in list" :key="index" @click="pushDetail(data)">
                <div class="left">
                    <div class="img"><img :src="data.userHead" alt=""></div>
                    <div class="message">
                        <h3>{{data.initiator}}的{{data.isDelete == 1 ? '添加' : '删除'}}{{data.type}}审批</h3>
                        <p style="margin-top:0.22rem">发起人：{{data.initiator}}</p>
                        <p>隶属校区/部门：{{data.dep}}</p>
                        <div :class=" data.status == 2?'status bule':'status red'">审批{{data.status == 2 ? '通过' : '拒绝'}}</div>
                    </div>
                </div>
                <div class="right">
                    {{data.submitTime}}
                </div>
            </li>
        </ul>
        <div v-else class="center">
                <div class="img">
                    <img src="img/quesheng1@2x.png" alt="">
                    <span>暂无审批内容</span>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    mounted() {
        (async ()=>{
            let data1 = await this.get('/user/coursePersonnelApproveThePresentation',{status:2});
            let data2 = await this.get('/user/coursePersonnelApproveThePresentation',{status:3});
            let data3 = await this.get('/user/peoplePersonnelApproveThePresentation',{status:2}); 
            let data4 = await this.get('/user/peoplePersonnelApproveThePresentation',{status:3});
            
            this.list = [...data1.data,...data2.data,...data3.data,...data4.data].sort((a,b)=>b.time-a.time);
            this.oldList = this.list;
        })()
    },
    data() {
        return {
            value1: 0,
            list:[],
            value2:0,
            option1: [
                { text: '全部', value: 0 },
                { text: '课程添加审批', value: 1 },
                { text: '课程删除审批', value: 2 },
                { text: '人员添加审批', value: 3 },
                { text: '人员删除审批', value: 4 },
            ],
            option2: [
                { text: '全部', value: 0 },
                { text: '审批通过', value: 1 },
                { text: '审批拒绝', value: 2 }
            ],
        }
    },
    methods: {
        pushDetail(data){
            this.$router.push({
                path:'/disposedetail',
                query:{
                    type:data.type == '课程' ? 1 : 2,
                    isDelete:data.isDelete,
                    status:data.status,
                    id:data.id
                }
            })
        },
        changeType(value){
            if(value == 0){
                 (async ()=>{
                    let data1 = await this.get('/user/coursePersonnelApproveThePresentation',{status:2});
                    let data2 = await this.get('/user/coursePersonnelApproveThePresentation',{status:3});
                    let data3 = await this.get('/user/peoplePersonnelApproveThePresentation',{status:2}); 
                    let data4 = await this.get('/user/peoplePersonnelApproveThePresentation',{status:3});
                    
                    this.oldList = [...data1.data,...data2.data,...data3.data,...data4.data].sort((a,b)=>b.time-a.time);
                    if(this.value2 == 1){
                        this.list = this.oldList.filter(item=>item.status == 2);
                        return
                    }else if(this.value2 == 2){
                        this.list = this.oldList.filter(item=>item.status == 3);
                        return
                    }
                    this.list =  this.oldList;
                })()
            }else if(value == 1){
                this.getData('/user/coursePersonnelApproveThePresentation',1);
            }else if(value == 2){
                this.getData('/user/coursePersonnelApproveThePresentation',2);
            }else if(value == 3){
                this.getData('/user/peoplePersonnelApproveThePresentation',1);
            }else {
                this.getData('/user/peoplePersonnelApproveThePresentation',2);
            }
        },
        getData(path,isDelete){
            (async ()=>{
                let data1 = await this.get(path,{status:2,isDelete});
                let data2 = await this.get(path,{status:3,isDelete});
                // this.list = [...data1.data,...data2.data].sort((a,b)=>b.time-a.time);
                this.oldList = [...data1.data,...data2.data].sort((a,b)=>b.time-a.time);
                if(this.value2 == 1){
                    this.list = this.oldList.filter(item=>item.status == 2);
                    return
                }else if(this.value2 == 2){
                    this.list = this.oldList.filter(item=>item.status == 3);
                    return
                }
                this.list =  this.oldList;
            })()
        },
        changeStatus(value){
            if(value == 0){
              this.list =  this.oldList; 
            }else if(value == 1){
                console.log(1);
              this.list = this.oldList.filter(item=>item.status == 2);  
            }else if(value == 2){
                this.list = this.oldList.filter(item=>item.status == 3);
            }
        }
    },
}
</script>
<style lang="scss" scoped>
    .box{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
   /deep/ .van-dropdown-menu__title--active{
       color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active{
        color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon{
       color: #2E9EFF !important;
   }
   .red{
       color: #FF0101;
   }
   .bule{
       color: #2D9DFF;
   }
    header{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.16rem;
        box-sizing: border-box;
        border-bottom: 0.01rem solid #E7E7E7;
        img{
            width: 0.26rem;
            height: 0.26rem;
        }
        span{
            margin-left: 0.08rem;
            font-size: 0.26rem;
            color: #343434;
        }
    }
    ul{
        padding: 0 0.2rem;
        box-sizing: border-box;
        flex: 1;
        height: 100%;
        overflow: auto;
        li{
            display: flex;
            // align-items: center;
            justify-content: space-between;
            padding: 0.2rem 0;
            box-sizing: border-box;
            border-bottom: 0.01rem solid #eee;
            .right{   
                font-size: 0.2rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7F7F7F;
            }
            .left{
                display: flex;
                .img{
                    width: 0.7rem;
                    height: 0.7rem;
                    img{
                        width: 100%;
                        height: 100%;
                        vertical-align: top;
                        border-radius: 50%;
                    }
                }
                .message{
                    margin-left: 0.15rem;
                    h3{
                        font-size: 0.26rem;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #343434;
                    }
                    p{
                        font-size: 0.22rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #808080;
                    }
                    .status{
                        margin-top: 0.3rem;
                        font-size: 0.2rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        // color: #FA742A;
                    }
                }
            }
        }
    }
    .center{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        .img{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 1.66rem;
                height: 1.26rem;
            }
            span{
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #C7C7C7;
                margin-top: 0.4rem;
            }
        }
    }
</style>